<!-- <template>
	<view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style -->>
<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="title">发现</view>
      <view class="add-btn" @click="navigateToPublish">
        <text class="iconfont icon-add"></text>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content">
      <!-- 动态列表 -->
      <view class="post-list">
        <view class="post-item" v-for="post in posts" :key="post.id" @click="navigateToPostDetail(post.id)">
          <!-- 头像和用户名 -->
          <view class="user-info">
            <image class="avatar" :src="post.avatar" mode="aspectFill"></image>
            <view class="user-detail">
              <view class="username">{{ post.username }}</view>
              <view class="time">{{ post.createTime }}</view>
            </view>
          </view>
          
          <!-- 动态内容 -->
          <view class="post-content">
            <view class="text-content">{{ post.content }}</view>
            <view class="images" v-if="post.images && post.images.length > 0">
              <image 
                v-for="(img, index) in post.images" 
                :key="index" 
                :src="img" 
                mode="aspectFill"
                class="post-image"
              ></image>
            </view>
          </view>
          
          <!-- 互动区域 -->
          <view class="interaction">
            <view class="like" :class="{ active: post.isLiked }" @click.stop="toggleLike(post.id)">
              <text class="iconfont icon-like"></text>
              <text class="count">{{ post.likeCount }}</text>
            </view>
            <view class="comment">
              <text class="iconfont icon-comment"></text>
              <text class="count">{{ post.commentCount }}</text>
            </view>
            <view class="share">
              <text class="iconfont icon-share"></text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 加载提示 -->
    <view class="loading" v-show="isLoading">
      <text>加载中...</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      posts: [
        {
          id: 1,
          username: '小明',
          avatar: 'https://picsum.photos/100/100?random=1',
          content: '今天去爬山了，风景真美！大家有没有推荐的爬山好去处？',
          images: ['https://picsum.photos/600/400?random=101', 'https://picsum.photos/600/400?random=102'],
          createTime: '10分钟前',
          likeCount: 32,
          commentCount: 8,
          isLiked: false
        },
        {
          id: 2,
          username: '小红',
          avatar: 'https://picsum.photos/100/100?random=2',
          content: '分享一道自己做的美食，大家看看怎么样？',
          images: ['https://picsum.photos/600/400?random=103'],
          createTime: '1小时前',
          likeCount: 45,
          commentCount: 12,
          isLiked: false
        },
        {
          id: 3,
          username: '小刚',
          avatar: 'https://picsum.photos/100/100?random=3',
          content: '新买的相机，试拍了几张，摄影小白求指导！',
          images: ['https://picsum.photos/600/400?random=104', 'https://picsum.photos/600/400?random=105', 'https://picsum.photos/600/400?random=106'],
          createTime: '3小时前',
          likeCount: 67,
          commentCount: 23,
          isLiked: false
        }
      ],
      isLoading: false
    }
  },
  onLoad() {
    // 页面加载时可以调用API获取动态列表
    this.fetchPosts();
  },
  methods: {
    // 获取动态列表
    fetchPosts() {
      this.isLoading = true;
      
      // 模拟API请求延迟
      setTimeout(() => {
        // 实际项目中这里应该调用API获取数据
        // this.posts = response.data;
        
        this.isLoading = false;
      }, 1000);
    },
    
    // 跳转到动态详情页
    navigateToPostDetail(postId) {
      uni.navigateTo({
        url: `/pages/post/detail?id=${postId}`
      });
    },
    
    // 跳转到发布页
    navigateToPublish() {
      uni.navigateTo({
        url: '/pages/post/publish'
      });
    },
    
    // 点赞功能
    toggleLike(postId) {
      const post = this.posts.find(item => item.id === postId);
      if (post) {
        post.isLiked = !post.isLiked;
        post.likeCount += post.isLiked ? 1 : -1;
      }
    }
  }
}
</script>

<style lang="scss">
.container {
  height: 100vh;
  background-color: #f8f8f8;
}

.header {
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #eee;
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
  
  .add-btn {
    width: 60rpx;
    height: 60rpx;
    border-radius: 30rpx;
    background-color: #ff4500;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40rpx;
  }
}

.content {
  padding: 20rpx;
}

.post-list {
  .post-item {
    background-color: #fff;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    padding: 24rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    
    .user-info {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      
      .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 40rpx;
        margin-right: 20rpx;
      }
      
      .user-detail {
        .username {
          font-size: 28rpx;
          font-weight: 500;
          color: #333;
        }
        
        .time {
          font-size: 22rpx;
          color: #999;
          margin-top: 6rpx;
        }
      }
    }
    
    .post-content {
      .text-content {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 20rpx;
      }
      
      .images {
        display: flex;
        flex-wrap: wrap;
        gap: 10rpx;
        
        .post-image {
          border-radius: 8rpx;
          overflow: hidden;
          
          &:nth-child(1) {
            width: 100%;
            height: 400rpx;
          }
          
          &:nth-child(n+2) {
            width: 200rpx;
            height: 200rpx;
          }
        }
      }
    }
    
    .interaction {
      display: flex;
      justify-content: space-around;
      padding-top: 20rpx;
      border-top: 1rpx solid #f5f5f5;
      margin-top: 20rpx;
      
      > view {
        display: flex;
        align-items: center;
        color: #666;
        font-size: 26rpx;
        
        .iconfont {
          margin-right: 8rpx;
        }
        
        .active {
          color: #ff4500;
        }
      }
    }
  }
}

.loading {
  text-align: center;
  padding: 40rpx 0;
  color: #999;
  font-size: 26rpx;
}
</style>